<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img
            src="../../assets/zjt2.png"
            alt=""
            class="back"
            @click="back()"
          />
        </div>
        <div class="head-search">创建简历</div>
        <div @click="save">保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>头像</span>
        <input
          v-show="false"
          type="file"
          accept="image/*"
          @change="triggerFile($event)"
          ref="input"
        />
        <div>
          <img
            src="../../assets/avatar.png"
            v-if="imgUrl === ''"
            alt=""
            @click="openImg"
          />
          <img :src="imgUrl" alt="" v-if="imgUrl !== ''" @click="openImg" />
        </div>
      </div>
      <div class="inpBox">
        <span>姓名</span>
        <div>
          <input type="text" v-model="name" placeholder="请输入姓名" />
        </div>
      </div>
      <div class="inpBox">
        <span>性别</span>
        <div>
          <input type="radio" name="sex" v-model="check" value="0" /><span
            >男</span
          >
          <input type="radio" name="sex" v-model="check" value="1" /><span
            >女</span
          >
        </div>
      </div>
      <div class="inpBox">
        <span>出生日期</span>
        <div>
          <input type="date" v-model="birthday" placeholder="请输入出生日期" />
        </div>
      </div>
      <div class="inpBox">
        <span>微信</span>
        <div>
          <input type="text" v-model="wx" placeholder="请输入微信" />
        </div>
      </div>
      <div class="inpBox">
        <span>邮箱</span>
        <div>
          <input type="text" v-model="email" placeholder="请输入邮箱" />
        </div>
      </div>
      <div class="inpBox">
        <span>电话</span>
        <div>
          <input type="text" v-model="tel" placeholder="请输入电话" />
        </div>
      </div>
      <div class="inpBox">
        <span>职位种类</span>
        <div @click="prop(0)">
          <input
            type="text"
            v-model="postValue"
            placeholder="请选择职位种类"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>工作城市</span>
        <div @click="prop(1)">
          <input
            type="text"
            v-model="cityValue"
            placeholder="请选择工作城市"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>期望薪资</span>
        <div @click="prop(2)">
          <input
            type="text"
            v-model="payValue"
            placeholder="请选择期望薪资"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>求职状态</span>
        <div @click="prop(3)">
          <input
            type="text"
            v-model="stateValue"
            placeholder="请选择求职状态"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>工作年限</span>
        <div @click="prop(4)">
          <input
            type="text"
            v-model="workYear"
            placeholder="请选择工作年限"
            readonly
          />
        </div>
      </div>
    </div>
    <mt-popup v-model="postIf" position="bottom">
      <p class="mt-p">
        <span @click="off(0)">取消</span>
        请选择职位
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="post"
        @change="postChange"
        value-key="positionTitle"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="cityIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span>
        请选择城市
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker :slots="city" valueKey="name" @change="cityOn"></mt-picker>
    </mt-popup>

    <mt-popup v-model="payIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>
        请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="payList"
        @change="payChange"
        value-key="salaryRange"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="stateIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span>
        请选择求职状态
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="stateLimit"
        @change="stateChange"
        value-key="jobStatus"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="YearIf" position="bottom">
      <p class="mt-p">
        <span @click="off(4)">取消</span>
        请选择工作年限
        <span @click="on(4)">确定</span>
      </p>
      <mt-picker
        :slots="WorkYear"
        @change="yearChange"
        value-key="workYear"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, Picker } from "mint-ui";
import threeLevelAddress from "../../assets/address.json";
var postValue = "";
var postId = "" ;
var cityValueId ="";
var cityValue = "";
var cityValue2 = "";
var payValue ="";
var payValueId = "";
var stateValueId="";
var stateValue = "";
var workYear="";
var workYearId = "";
export default {
  inject: ["reload"],
  name: "found",
  components: {
    Popup,
    Picker
  },
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getData();
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      userId: localStorage.getItem("userId"),
      //个人简历信息
      imgUrl: "",
	    apiURL: this.apiURL,
      check: 0,
      file: "",
      name: "",
      birthday: "",
      phone: "",
      wx: "",
      email: "",
      tel:"",
      // age:"",
      postValue: "",
	    postId: '',
      postAct: 0,
      postIf: false,
      post: [
        {
          flex: 1,
          defaultIndex: 0,
          values: [],
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        }
      ],
	  postValueId: "",
      cityValue: "",
      cityAct: 0,
      cityIf: false,
      city: [
        {
          flex: 1,
          defaultIndex: 0,
          values: this.getProvinceArr(),
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: this.getCityArr("北京市"),
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: this.getCountyArr("北京市", "北京市"),
          className: "slot5",
          textAlign: "center"
        }
      ],
	  cityValueId: "",
      payValue: "",
      payAct: 0,
      payIf: false,
      payList: [
        {
          values: []
        }
      ],
      payValueId: "",
	    cityValue2: '',
      stateValue: "",
      stateAct: 0,
      stateIf: false,
      stateLimit: [
        {
          values: []
        }
      ],
	  stateValueId: "",
      workYear: "",
      yearAct: 0,
      YearIf: false,
	    workId: "",
      WorkYear: [
        {
          values: []
        }
      ],
      workYearId: ""
    };
  },
  methods: {
    //回退
    back() {
      this.$router.go(-1); //返回上一层
    },
    triggerFile: function(event) {
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function(e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imgUrl = "data:image/png;base64," + url;
        that.file = file;
      };
    },
    //头像图片绑定触发点击事件
    openImg() {
      this.$refs.input.click();
    },
    //保存数据
    save() {
      /*计算用户的年龄*/
      // 获取当前时间
      var currentTime = new Date();
      // 获取出生日期
      var birthday = this.birthday;
      // 将字符串形式的出生日期转换为Date对象
      var dateParts = birthday.split("-");
      var year = parseInt(dateParts[0]);
      var month = parseInt(dateParts[1]) - 1; // JavaScript月份索引从0开始，所以需要减去1
      var day = parseInt(dateParts[2]);
      var birthDate = new Date(year, month, day);
      // 计算年龄
      var age = currentTime.getFullYear() - birthDate.getFullYear();
      if (currentTime < birthDate) {
        age--; // 如果还未达到出生年龄，则年龄应减少1
      } else if (
        birthDate.getMonth() > currentTime.getMonth() ||
        (birthDate.getMonth() === currentTime.getMonth() &&
          birthDate.getDay() > currentTime.getDay())
      ) {
        age--; // 若已经超过了出生月份或者与出生日期相等且今天比出生日期更大，则年龄应减少1
      }
      this.age=age;

      let formData = new FormData();
      formData.append("file", this.file);
      formData.append("userName", this.name);
      formData.append("sex", this.check);
      formData.append("birthdate", this.birthday);
      formData.append("wechat", this.wx);
      formData.append("email", this.email);
      formData.append("tel", this.tel);
      formData.append("age", this.age);
      formData.append("positionType",this.postId);
      formData.append("cityId",this.cityValue2);
      formData.append("resumeSalary",this.stateValueId);
      formData.append("workId",this.workId);
      formData.append(".",this.postId);
      formData.append("userId",this.userId)
      console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'+this.postId)
      console.log('====================='+this.cityValue2)
      console.log('sadsds'+this.payValueId)
      console.log('=========='+this.stateValueId)
      console.log('======'+this.workYearId)
      console.log('=========············'+this.userId)
      this.$http({
		    method: "post",
        url: this.apiURL + "/userResume/save",
        data: formData

      })
        .then(({ data }) => {
          // 成功处理
          console.log(data);
          this.$router.push({
            name: "usersResume",
            params: { userId: this.userId }
          });
        })
        .catch(error => {
          // 错误处理
          console.error("Upload error: ", error);
        });
    },

    getData: function () {
      this.$http({
        url: this.apiURL + '/userResume/list',
        method: 'post'
      }).then(({data}) => {
        console.log(data)
        let positionTypeList = data.positionTypeList
        let salaryList = data.salaryList
        let jobStatusList = data.jobStatusList
        let workYearList = data.workYearList
        console.log(positionTypeList[0].list2)
        this.post[0].values = positionTypeList
        this.post[2].values = positionTypeList[0].list2
        this.post[4].values = positionTypeList[0].list2[0].list3
        this.payList[0].values = salaryList
        this.stateLimit[0].values = jobStatusList
        this.WorkYear[0].values = workYearList
      })
    },
    // 判断生日格式是否正确
    isValidDateFormat(dateString) {
      const dateFormatRegex = /^\d{4}-\d{2}-\d{2}$/;
      // 使用正则表达式进行匹配
      return dateFormatRegex.test(dateString);
    },

    prop(i) {
      if (i === 0) {
        this.postIf = !this.postIf;
      } else if (i === 1) {
        this.cityIf = !this.cityIf;
      } else if (i === 2) {
        this.payIf = !this.payIf;
      } else if (i === 3) {
        this.stateIf = !this.stateIf;
      } else if (i === 4) {
        this.YearIf = !this.YearIf;
      }
    },

    postChange(picker, values) {
      if (values[0]){
        picker.setSlotValues(1, values[0].list2);
        console.log(values);
        picker.setSlotValues(2, values[1].list3);
        postValue = values[2].positionTitle;
        postId = values[0].id

      }


    },
    cityOn(picker, values) {
      if (this.regionInit) {
        //   //给市、县赋值
        picker.setSlotValues(1, this.getCityArr(values[0]["name"]));
        picker.setSlotValues(2,this.getCountyArr(values[0]["name"], values[1]["name"]));

        //   //取值并赋值
        cityValue = values[2]["name"];
        cityValue2 = values[2]["code"];

      } else {
        this.regionInit = true;
      }
    },
      payChange(picker, values) {
        if (values[0]) {
          //赋予全局变量为选择内容
          payValue = values[0].salaryRange;
          //赋予当前选中的选项的id属性值 用于表单提交
          payValueId = values[0].id;
          // this.payValueId = picker.values[0].id;
          console.log(this.payValueId)
        }
    },
    stateChange(picker, values) {
      if (values[0]) {
        stateValue = values[0].jobStatus;
        stateValueId = values[0].id;
      }

    },
    yearChange(picker, values) {
      if (values[0]) {
        workYear = picker.values[0].workYear;
        workYearId = values[0].id;
      }
    },

    on(i) {
      // debugger
      if (i === 0) {
        this.postValue = postValue;
        this.postId = postId;
        this.postIf = false;
      } else if (i === 1) {
        console.log(cityValue);
        this.cityValue = cityValue;
        this.cityValueId =cityValueId;
        this.cityValue2 = cityValue2;
        this.cityIf = false;
      } else if (i === 2) {
        this.payValue = payValue;
        this.payValueId =payValueId;
        this.payIf = false;
      } else if (i === 3) {
        this.stateValue = stateValue;
        this.stateValueId=stateValueId;
        this.stateIf = false;
      } else if (i === 4) {
        this.workYear = workYear;
        this.workYearId =workYearId;
        this.YearIf = false;
      }
    },
    off(i) {
      if (i === 0) {
        // this.post = ""; /*自己改过的，以前是post = "" ; */
        this.postIf = false;
      } else if (i === 1) {
        cityValue = "";
        this.cityIf = false;
      } else if (i === 2) {
        payValue = "";
        this.payIf = false;
      } else if (i === 3) {
        stateValue = "";
        this.stateIf = false;
      } else if (i === 4) {
        workYear = "";
        this.YearIf = false;
      }
    },

    getProvinceArr() {
      // alert(1111);
      let provinceArr = [];
      threeLevelAddress.forEach(function(item) {
        let obj = {};
        obj.name = item.name;
        obj.code = item.code;
        provinceArr.push(obj);
      });
      return provinceArr;
    },
    //遍历json，返回市级对象数组
    getCityArr(province) {
      // console.log("省：" + province);
      let cityArr = [];
      threeLevelAddress.forEach(function(item) {
        if (item.name === province) {
          item.children.forEach(function(args) {
            let obj = {};
            obj.name = args.name;
            obj.code = args.code;
            cityArr.push(obj);
          });
        }
      });
      return cityArr;
    },
    //遍历json，返回县级对象数组
    getCountyArr(province, city) {
      // alert(province,city);
      let countyArr = [];
      threeLevelAddress.forEach(function(item) {
        if (item.name === province) {
          item.children.forEach(function(args) {
            if (args.name === city) {
              args.children.forEach(function(param) {
                let obj = {};
                obj.name = param.name;
                obj.code = param.code;
                countyArr.push(obj);
              });
            }
          });
        }
      });
      console.log(countyArr);
      return countyArr;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}

.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.inpBox img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}

.inpBox div {
  display: flex;
  align-items: center;
}

.inpBox div input[type="radio"] {
  margin-left: 20px;
  margin-right: 5px;
}

.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.inpBoxs .inpBox {
  border: 0;
}

.inpBoxs textarea {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
